import React from 'react';
import { Spin, Upload } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import styles from '../index.less';
import { BaseTable } from 'ali-react-table';

export const FileList = ({
  uploadList = [],
  beforeUpload,
  uploadChange,
  btnLoding = false,
  deleteUploadFile,
}) => {
  const columns = [
    {
      name: '序列',
      code: 'label',
    },
    {
      name: '文件',
      code: 'fileName',
      render: (v) => (v ? v : <span style={{ color: 'rgb(109,113,116)' }}>请上传文件</span>),
    },
    {
      name: '状态',
      code: 'status',
      render: (v, record) => {
        switch (v) {
          case 'upload':
            return <span>待上传</span>;
          case 'success':
            return <span style={{ color: 'rgb(49,127,99)' }}>上传成功</span>;
          case 'error':
            return <span style={{ color: 'rgb(220,91,89)' }}>上传失败</span>;
          case 'progress':
            return (
              <span>
                {' '}
                <LoadingOutlined spin />
                上传 {record.progress}%
              </span>
            );
        }
      },
    },
    {
      width: 120,
      name: '操作',
      code: 'value',
      align: 'center',
      render: (v, record) => {
        return (
          <div className={styles.uploadSpa}>
            <Upload
              key={record.value}
              fileList={record?.fileList || []}
              name="file"
              onChange={(fileList) => uploadChange(fileList, v)}
              accept=".xls, .xlsx"
              showUploadList={false}
              beforeUpload={(file) => beforeUpload(file, v)}
            >
              <span style={{ fontSize: '12px', color: '#18a0fb', cursor: 'pointer' }}>
                {record.status === 'upload' ? '上传文件' : '重新上传'}
              </span>
            </Upload>
            <span
              className={styles.uploadBtn}
              onClick={() => deleteUploadFile(v)}
              style={{ fontSize: '12px', marginLeft: 16, color: '#18a0fb', cursor: 'pointer' }}
            >
              删除
            </span>
          </div>
        );
      },
    },
  ];

  return (
    <Spin spinning={btnLoding}>
      <BaseTable
        style={{
          // '--header-bgcolor': '#353638',
          '--header-color': 'white',
          '--border-color': '#444',
          '--header-row-height': '36px',
          '--font-size': '12px',
          '--cell-border-vertical': '1px solid #444',
          '--header-cell-border-vertical': '1px solid #444',
          '--bgcolor': '#222629',
          '--color': 'white',
          '--hover-bgcolor': '#222629',
          '--cell-padding': '4px 5px',
          marginLeft: '24px',
          border: '1px solid #444',
          borderRadius: '5px',
          height: 450,
          overflow: 'auto',
        }}
        useOuterBorder={true}
        stickyScrollHeight={50}
        primaryKey={'value'}
        dataSource={uploadList}
        columns={columns}
      />
    </Spin>
  );
};
